<template>
	<view class="box" :style="viewColor">
		<!-- 红底 -->
		<view class="herd"></view>
		<!-- 顶部图标 -->
		<view class="topNav">
			<image :src="userInfo.avatar? userInfo.avatar : imgHost+'myImg'+keyColor+'.png'" @click="toUserIndex"></image>
			<!-- <image :src="imgHost+'shoppingCart.png'" @click="toShoppingCar"></image> -->
			<view @click="toMpjia">
				<image :src="imgHost+'card.png'"></image>
				<text>名片夹</text>
			</view>
			<view class="editInfo" @click="jumpedit">
				<image :src="imgHost+'editinfoimg.png'"></image>
			</view>
		</view>
		<!-- 导航 -->
		<view class="navClass">
			<view v-for="item in typeList" :class="item.type == type ? 'active' : ''" @click="switchTab(item)">
				<!--type=item.type-->
				<view>{{item.name}}</view>
				<image v-if="item.type == type" :src="imgHost+'active.png'"></image>
			</view>
			<view class="shaixuan" v-if="type == 1">
				<image class="shaixuan" src="@/static/images/shaixuan.png" mode="aspectFill" @click="isShaixuan = true">
				</image>
			</view>
			<view class="shaixuan" v-if="type == 2">
				<image class="shaixuan" src="@/static/images/fabudt.png" mode="aspectFill" @click="jumpFabu"></image>
			</view>
		</view>
		<!-- 图片 -->
		<view class="bigImg">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 人脉集市 -->
		<view v-if="type == 1">
			<!-- 搜索 -->
			<!-- <view class="search">
				<view class="input">
					<input placeholder="搜索公司行业或公司名称" @click="toPeopleSearch({category_name:''})" />
					<image :src="imgHost+'search.png'"></image>
				</view>
				<view class="hotSearch">
					<view v-for="item in hotSearchList" @click="toPeopleSearch(item)">{{item.category_name}}</view>
				</view>
			</view> -->
			<!-- 信息列表 -->
			<view class="contentList">
				<!-- <view class="contentTitle">
					<text :class="peopleViewCondition == 1 ? 'active' : '' " @click="peopleViewCondition=1">最新</text>
					<text :class="peopleViewCondition == 2 ? 'active' : '' " @click="peopleViewCondition=2">人气</text>
					<text :class="peopleViewCondition == 3 ? 'active' : '' " @click="peopleViewCondition=3">距离</text>
				</view> -->
				<view class="contentData">
					<view class="listViewitem" v-for="(item,index) in enterpriseStaffList" :key="index"
						@click="toStaffCard(item)">
						<image class="image1" :src="item.avatar"></image>
						<view class="conListView">
							<view class="left">
								<view class="view11">
									<!-- <image :src="imgHost+'enterprise.png'"></image> -->
									<text class="text1">{{item.nickname}}</text>
									<text class="text2" v-if="item.distance!==''">{{item.distance + 'km'}}</text>
								</view>
								<view class="view1">
									<view class="sex0" v-if="item.sex == 0">
										<image src="@/static/images/bm.png" mode="aspectFill"></image>
										<!-- <text>{{item.type_name}}</text> -->
										<text v-if="item.sex == 0">{{item.age}}</text>
									</view>
									<view class="sex" v-if="item.sex == 1">
										<image src="@/static/images/nan.png" mode="aspectFill"></image>
										<!-- <text>{{item.type_name}}</text> -->
										<text>{{item.age}}</text>
									</view>
									<view class="sex1" v-if="item.sex == 2">
										<image src="@/static/images/nv.png" mode="aspectFill"></image>
										<!-- <text>{{item.type_name}}</text> -->
										<text>{{item.age}}</text>
									</view>
								</view>

							</view>
							<view class="right">
								<!-- <image :src="imgHost+'location.png'"></image> -->
								<view>{{item.autograph}}</view>
							</view>
							<!-- <Button type="primary">Primary</Button> -->
						</view>
						<view style="display: flex;flex-direction: column;align-items: center;margin-left: 40rpx;"
							class="shoucang" @click.stop="operation(item,index)" v-if="item.client_check == 0">
							<image style="width: 30rpx;height: 30rpx;margin-bottom: 10rpx;"
								:src=" item.client_check == 1 ? imgHost+'like.png' : imgHost+'noLike.png'"></image>
							<!-- <view>{{itm,.client_check == 1 ? '已加入' : '未加入'}}</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 供需共享 -->
		<view v-else-if="type == 2">
			<view>
				<view class="page_con">
					<view class="grass_header">
						<view class="header">
							<view class="search_count">
								<navigator v-if="community_status == 1" url="/pages/plantGrass/plant_release/index"
									class="release_btn acea-row row-center-wrapper" hover-class="none">
									<text class="iconfont icon-fabu"></text>
								</navigator>
								<navigator url="/pages/plantGrass/plant_search/index" hover-class="none" class="search">
									<text class="iconfont icon-xiazai5"></text>搜索想看的文章
								</navigator>
								<navigator class="search_topic" url="/pages/plantGrass/plant_topic/index">
									<image class="topic_icon" src="/static/images/topic_cate.png"></image>
								</navigator>
							</view>
						</view>
						<view class="longTab" v-show="tabActive === 1">
							<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;"
								scroll-with-animation class="menu" :scroll-left="tabLeft" show-scrollbar="true">
								<view class="longItem" :style="'width:' + isWidth + 'px'" :data-index="index"
									:class="index === tabClick ? 'click' : ''" v-for="(item, index) in menuList"
									:key="index" :id="'id' + index" @click.stop="selectMenu(item, index, true)">
									{{ item.cate_name }}
								</view>
								<view v-if="menuList.length" class="underlineBox"
									:style="'transform:translateX(' + isLeft + 'px);width:' + isWidth + 'px'">
									<view class="underline bg-color-white"></view>
								</view>
							</scroll-view>
						</view>

					</view>
					<scroll-view class="main" scroll-y="true" @scroll="followScroll">
						<view class="tab-cont" id="main">
							<!-- 关注 -->
							<view v-if="tabActive === 0">
								<view v-if="isLogin && followList.length > 0" class="follow_count">
									<block v-for="(item, index) in followList" :key="index">
										<view class="list_count">
											<view class="title">
												<navigator hover-class="none"
													:url="'/pages/plantGrass/plant_user/index?id='+item.uid"
													v-if="item.author" class="author">
													<easy-loadimage class="picture" mode="widthFix"
														:image-src="item.author.avatar || '/static/images/f.png'"></easy-loadimage>
													<text class="name">{{item.author.nickname || ''}}</text>
												</navigator>
												<view class="time">{{item.time}}</view>
											</view>
											<view class="product">
												<productConSwiper :imgUrls="item.image"></productConSwiper>
											</view>
											<view class="pro_describle">
												<view class="mentioned"
													v-if="item.relevance && item.relevance.length > 0"
													@click="openMore(item)">
													<text class="title">查看TA提到的宝贝({{item.relevance.length}})</text>
													<view class="product_more">
														<view class="item">
															<easy-loadimage v-if="indexn<4"
																v-for="(itemn, indexn) in item.relevance" :key="indexn"
																mode="widthFix"
																:image-src="(itemn.spu && itemn.spu.image) || itemn.image"
																class="more_image"></easy-loadimage>
														</view>
														<text class="iconfont icon-gengduo3"></text>
													</view>
												</view>
												<view v-if="!item.show && item.content.length > 110"
													class="product_info">
													<text class="text">
														{{item.content.substring(0,90)+'...'}}
													</text>
													<text @click.stop="showMore(item)" class="unfold_btn">展开</text>
												</view>
												<view v-else class="product_info">
													<text class="text">
														{{item.content}}
													</text>
												</view>
												<navigator v-if="item.topic" hover-class="none" class="product_cate"
													:url="'/pages/plantGrass/plant_search_list/index?id='+item.topic.topic_id">
													<view>
														<text class="icon">#</text><text
															class="text">{{item.topic.topic_name}}</text>
													</view>
												</navigator>
												<view class="foot_bar">
													<!-- #ifdef MP -->
													<button class="time iconfont icon-fenxiang2" open-type="share"
														hover-class='none' @click="shareFriend(item)"></button>
													<!-- #endif -->
													<!-- #ifndef MP -->
													<button></button>
													<!-- #endif -->
													<view class="item">
														<view class="item_count" @click.stop="likeToggle(item)">
															<text class="iconfont"
																:class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
															<text>{{item.count_start > 0 ? item.count_start : '点赞'}}</text>
														</view>
														<view class="item_count" @click="openCommon(item,index)">
															<text class="iconfont icon-pinglun"></text>
															<text>{{item.count_reply > 0 ? item.count_reply : '评论'}}</text>
														</view>
													</view>
												</view>
											</view>
										</view>
									</block>
								</view>
								<view v-if="followList.length == 0 && !focusLoading && isLogin" class="empty">
									<image :src="$util.hostImages('images_uniapp/no_thing.png')"></image>
									<text>暂无内容~</text>
								</view>
								<view v-if="!isLogin" class="empty no_login">
									<image :src="$util.hostImages('/images_uniapp/no_login.png')"></image>
									<view class="title">暂未登录</view>
									<text>登录后可查看关注用户的发布哦~</text>
									<button class="login_btn" @click="authOpen">立即登录</button>
								</view>
							</view>
							<!-- 发现 -->
							<view v-show="tabActive === 1">
								<!-- 商品 -->
								<swiper :interval="interval" indicator-color="rgba(255,255,255,0.6)"
									:current="swiperCurrent" @change="swiperChange"
									:style="'height:'+swiperHeight+'px'">
									<block v-for="(item,index) in menuList" :key="index">
										<swiper-item :item-id="`${item.category_id}`">
											<scroll-view @scroll="scrollLeft" scroll-y="true"
												:style="'height:'+swiperHeight+'px'" id="goods"
												@touchmove="onTouchmove">
												<view
													v-if="cateGoods[item.category_id] &&  cateGoods[item.category_id].goods.length"
													class="goods-wrap" id="goods">
													<view class="goods">
														<WaterfallsFlow :wfList='cateGoods[item.category_id].goods'
															:isFind="true" @likeToggle="likeToggle" />
													</view>
												</view>
												<view
													:hidden="cateGoods[item.category_id] && !cateGoods[item.category_id].goodsLoading"
													class="acea-row row-center-wrapper loadingicon">
													<text
														class="iconfont icon-jiazai loading"></text>{{!cateGoods[item.category_id] ? 0 : cateGoods[item.category_id].goodsLoading}}
												</view>
												<view
													v-if="cateGoods[item.category_id] && cateGoods[item.category_id].goods.length == 0 && !cateGoods[item.category_id].goodsLoading"
													class="empty">
													<image :src="$util.hostImages('images_uniapp/no_thing.png')">
													</image>
													<text>暂无文章~</text>
												</view>
											</scroll-view>
										</swiper-item>
									</block>
								</swiper>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 他提到的宝贝弹窗 -->
				<mentioned ref="mentioned" :isHome="true" @close="closePopup" :list="moreList" :uid="authorUid">
				</mentioned>
				<!-- 评论弹窗 -->
				<comment ref="comment" :isShow="showComment" @successFul="commentSucces" @close="close"></comment>
				<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse">
				</authorize>
			</view>
			<!-- 共享分类 -->
			<view class="sharingClass" v-if="false">
				<scroll-view scroll-x class="sharingClassScroll">
					<view v-for="item in sharingClass" :class="item.id == sharingClassId ? 'active' : ''"
						@click="sharingClassId=item.id">{{item.name}}</view>
				</scroll-view>
			</view>
			<!-- 最新 人气 -->
			<view class="sharingClassTitle" v-if="false">
				<text :class="supplyViewCondition == 1 ? 'active' : '' " @click="supplyViewCondition=1">最新</text>
				<text :class="supplyViewCondition == 2 ? 'active' : '' " @click="supplyViewCondition=2">人气</text>
			</view>
			<!-- 内容 -->
			<view class="sharingClassContent" v-if="false">
				<view class="sharingClassContentBox" @click="toDemandSquare">
					<view class="sharingClassContentBoxTop">
						<view class="sharingClassContentBoxTopLeft">
							<image src="@/static/images/f.png"></image>
							<view>
								<view>Ai壹力-陈墨一</view>
								<view>2020-01-01</view>
							</view>
						</view>
						<button>联系TA</button>
					</view>
					<view class="sharingClassContentBoxBody">
						<view class="sharingClassContentBoxBodyText">
							趣来达外卖跑腿系统 打造本地专属品牌外卖平台
						</view>
						<view class="sharingClassContentBoxBodyImg">
							<image :src="imgHost+'productImg.png'"></image>
						</view>
					</view>
					<view class="sharingClassContentBoxBottom">
						<view>
							<image :src="imgHost+'share.png'"></image>
							<text>转发</text>
						</view>
						<view>
							<image :src="imgHost+'comment.png'"></image>
							<text>30</text>
						</view>
						<view>
							<image :src="imgHost+'thumbsUp.png'"></image>
							<text>点赞</text>
						</view>
					</view>
				</view>
				<view class="sharingClassContentBox">
					<view class="sharingClassContentBoxTop">
						<view class="sharingClassContentBoxTopLeft">
							<image src="@/static/images/f.png"></image>
							<view>
								<view>Ai壹力-陈墨一</view>
								<view>2020-01-01</view>
							</view>
						</view>
						<button>联系TA</button>
					</view>
					<view class="sharingClassContentBoxBody">
						<view class="sharingClassContentBoxBodyText">
							趣来达外卖跑腿系统 打造本地专属品牌外卖平台
						</view>
						<view class="sharingClassContentBoxBodyImg">
							<image v-for="item in 3" :src="imgHost+'productImg.png'"></image>
						</view>
					</view>
					<view class="sharingClassContentBoxBottom">
						<view>
							<image :src="imgHost+'share.png'"></image>
							<text>转发</text>
						</view>
						<view>
							<image :src="imgHost+'comment.png'"></image>
							<text>30</text>
						</view>
						<view>
							<image :src="imgHost+'thumbsUp.png'"></image>
							<text>点赞</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 产品中心 -->
		<view v-else-if="type == 3">
			<!-- 搜索 -->
			<view class="productCenterSearch">
				<view class="productCenterSearchInput">
					<input placeholder="请输入产品名称搜索" @click="toProductSearch" />
					<image :src="imgHost+'search.png'"></image>
				</view>
				<image v-if="prdouctCenterViewCondition == 1 " :src="imgHost+'all.png'"
					@click="prdouctCenterViewCondition=2"></image>
				<image v-else-if="prdouctCenterViewCondition == 2" :src="imgHost+'listShow.png'"
					@click="prdouctCenterViewCondition=1"></image>
			</view>
			<!-- 内容 -->
			<view class="productCenterContent" v-if="prdouctCenterViewCondition == 1">
				<view class="productCenterContentBox" v-for="item in prdouctCenterData" @click="toProductDetail(item)">
					<image :src="item.image"></image>
					<view>{{item.store_name}}</view>
					<view><text>￥</text>{{item.price}}</view>
				</view>
			</view>
			<!-- 列表方式展示 -->
			<view class="productCenterContentList" v-if="prdouctCenterViewCondition == 2">
				<view class="productCenterContentBox" v-for="item in prdouctCenterData" @click="toProductDetail(item)">
					<image :src="item.image"></image>
					<view>
						<view>{{item.store_name}}</view>
						<view><text>￥</text>{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot" v-if="newData.status && newData.status.status">
			<view class="page-footer" id="target" :style="{'background-color':newData.bgColor.color[0].item}">
				<view class="foot-item" v-for="(item,index) in newData.menuList" :key="index" @click="goRouter(item)">
					<block v-if="item.link == activeRouter">
						<image :src="item.imgList[0]"></image>
						<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
						</view>
					</block>
					<block v-else>
						<image :src="item.imgList[1]"></image>
						<view class="txt" :style="{color:newData.txtColor.color[0].item}">{{item.name}}</view>
					</block>
				</view>
			</view>
		</view>
		<!-- <view class="foot">
		     <view class="page-footer" id="target" :style="{'background-color':newData.bgColor.color[0].item}">
		          <view class="foot-item" v-for="(item,index) in newData.menuList" :key="index"
		               @click="goRouter(item)">
		               <block v-if="item.link == activeRouter">
		                    <image :src="item.imgList[0]"></image>
		                    <view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
		                    </view>
		               </block>
		               <block v-else>
		                    <image :src="item.imgList[1]"></image>
		                    <view class="txt" :style="{color:newData.txtColor.color[0].item}">{{item.name}}</view>
		               </block>
		               <div class="count-num"
		                    v-if="item.link === '/pages/order_addcart/order_addcart' && cartNum > 0">
		                    {{cartNum}}
		               </div>
		          </view>
		     </view>
		</view> -->
		<!-- <windowButton :isLogin="isLogin"></windowButton> -->

		<view class="shaixuancard" v-if="isShaixuan">
			<view style="flex: 1;" @click="isShaixuan = false">

			</view>
			<view class="card">
				<view class="top">
					<view class="topLeft">
						<text @click="reset()">重置</text>
						<!-- <image src="../../static/images/close.png" mode="aspectFill"></image> -->
					</view>
					<text class="textTitle">筛选</text>
					<view class="topRight">
						<text @click="finishSearch()">完成</text>
					</view>
				</view>
				<view class="searchView">
					<input type="text" placeholder="请输入关键字" v-model="nickname">
				</view>
				<p>选择你想看的用户</p>
				<view class="sexView">
					<view class="sexItem" v-for="(item,index) in sexList" :key="index"
						:class="item.isSelexted ? 'select':'sexItem'" @click="changeSex(item,index)">
						{{item.name}}
					</view>
				</view>
				<view class="title2">
					<p>年龄</p>
					<text>{{ rangeValues[0] }}-{{ rangeValues[1] }}</text>
				</view>
				<view class="Slider">
					<RangeSlider :width="slideWidth" :height="slideHeight" :blockSize="slideBlockSize" :min="slideMin"
						:max="slideMax" :values="rangeValues" :step="step" :liveMode="isLiveMode"
						active-color="var(--view-theme)" @rangechange="onRangeChange">
						<view slot="minBlock" class="range-slider-block"></view>
						<!-- 左边滑块的内容 -->
						<view slot="maxBlock" class="range-slider-block"></view>
						<!-- 右边滑块的内容 -->
					</RangeSlider>
				</view>
				<p>星座</p>
				<view class="xzView">
					<view class="xzItem" v-for="(item,index) in xzList" :key="index"
						:class="item.isSelexted ? 'xzselect':'sexItem'" @click="changeXZ(item,index)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="createdIwPop" type="center">
			<view class="oback" @click="showiw">
				<div class='odivpp'>
					<!-- <image class="oive" :src="imgHost + '/mine/top.png'" mode=""></image> -->
					<!-- <p>
		                      <image :src="imgHost + '/mine/bottom.png'" mode=""></image>
		                      点击右上角“ ”，选择添加朋友，粘贴微信号后搜索
		                 </p> -->
					<p>
						<!-- <image :src="imgHost1 + '/mine/one.png'" mode=""></image> -->
						长按图片进行扫描，添加微信
					</p>
					<image class="oivee" :src="imgHost1 + '/mine/bott.png'" mode=""></image>
					<!-- <image class="oivee" :src="xinxilist.wechat_img" mode=""></image> -->
				</div>
				<div class="oimage">
					<image :show-menu-by-longpress="true" :src="shequ_qrcodes" mode="aspectFit"></image>
				</div>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		getMerProductHot,
		merClassifly
	} from "@/api/store.js"
	import {
		getEnterpriseList,
		getPeopleCircleBanner,
		carduser,
		getEnterpriseStaffList,
		deleteCard,
		addClient
	} from "@/api/userminp.js"
	import {
		getNavigation,
		getShareTitle
	} from '@/api/public.js'
	import {
		productLstApi
	} from "@/api/product.js"
	import WaterfallsFlow from '@/components/plantWaterfallsFlow/WaterfallsFlow.vue'
	import mentioned from '@/components/mentioned.vue';
	import comment from '@/components/comment.vue';
	import {
		graphicLstApi,
		getTopicList,
		graphicStartApi,
		focusArticleLst
	} from '@/api/community.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';;
	import productConSwiper from '@/components/plantConSwiper';
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
	// import windowButton from "@/components/windowButton.vue"
	import {
		configMap
	} from '@/utils';
	import {
		fail
	} from 'assert';
	import RangeSlider from '@/components/range-slider/range-slider.vue';
	const app = getApp();
	export default {
		data() {
			return {
				nickname: '', //搜索姓名
				rangeValues: [0, 100],
				age_min: 0,
				age_max: 100,
				slideWidth: 686,
				slideHeight: 80,
				slideBlockSize: 30,
				slideMin: 0,
				slideMax: 100,
				isLiveMode: true,
				step: 1,
				//筛选弹窗
				isShaixuan: false,
				sexList: [{
						id: '',
						name: '全部',
						isSelexted: true
					},
					{
						id: 1,
						name: '男',
						isSelexted: false
					},
					{
						id: 2,
						name: '女',
						isSelexted: false
					}
				],
				sexId: "",
				xzList: [{
						id: 1,
						name: '白羊座',
						isSelexted: false
					},
					{
						id: 2,
						name: '金牛座',
						isSelexted: false
					},
					{
						id: 3,
						name: '双子座',
						isSelexted: false
					},
					{
						id: 4,
						name: '巨蟹座',
						isSelexted: false
					},
					{
						id: 5,
						name: '狮子座',
						isSelexted: false
					},
					{
						id: 6,
						name: '处女座',
						isSelexted: false
					},
					{
						id: 7,
						name: '天秤座',
						isSelexted: false
					},
					{
						id: 8,
						name: '天蝎座',
						isSelexted: false
					},
					{
						id: 9,
						name: '射手座',
						isSelexted: false
					},
					{
						id: 10,
						name: '摩羯座',
						isSelexted: false
					},
					{
						id: 11,
						name: '水瓶座',
						isSelexted: false
					},
					{
						id: 12,
						name: '双鱼座',
						isSelexted: false
					}
				],
				xzId: "",
				// 图片路径拼接
				imgHost: HTTP_REQUEST_URL + '/static/contactsCircle/',
				imgHost1: HTTP_REQUEST_URL + '/mingpian',
				// 轮播图
				bannerList: [],
				// 推荐搜索列表
				hotSearchList: [],
				// 类型列表
				typeList: [{
						type: 1,
						name: "附近"
					}, {
						type: 2,
						name: "动态"
					}, {
						type: 3,
						name: "社群"
					},

				],
				// 选择类型
				type: 1,
				// 企业列表
				enterpriseList: [],
				// 企业列表页数
				enterpriseListPage: 1,
				// 共享分类
				sharingClass: [{
						id: 1,
						name: "全部"
					},
					{
						id: 2,
						name: "房地产"
					},
					{
						id: 3,
						name: "金融"
					},
					{
						id: 4,
						name: "互联网"
					},
					{
						id: 5,
						name: "计算机"
					},
					{
						id: 6,
						name: "科研"
					},
					{
						id: 7,
						name: "服饰"
					},
					{
						id: 8,
						name: "通讯"
					}
				],
				// 选中共享分类id
				sharingClassId: 1,
				// 人脉集市展示条件
				peopleViewCondition: 1,
				// 供需共享展示条件
				supplyViewCondition: 1,
				// 产品中心展示方式
				prdouctCenterViewCondition: 1,
				// 产品中心数据
				prdouctCenterData: [],
				// 产品中心页数
				prdouctCenterPage: 1,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				newData: {},
				activeRouter: '',
				// #ifdef MP
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(),
				// #endif
				tabClick: 0,
				tabLeft: 0,
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				windowHeight: 0,
				swiperHeight: 0,
				childIndex: 0,
				showComment: false,
				userInfo: {},
				goods: [], // 商铺商品
				followList: [], //关注列表
				menuList: [],
				moreList: [],
				commList: [], //评论列表
				goodsList: [

				],
				navShow: false,
				navActive: 0,
				tabActive: 1, // 底部切换
				keyword: '',
				sortPrice: true, // 价格排序
				focusLoading: false,
				goodsLoading: false,
				goodsLoaded: false,
				focusLoaded: false,
				loadTitle: '加载更多',
				isShowAuth: false, //是否隐藏授权
				isAuto: false, //没有授权的不会自动授权
				where: {
					category_id: 0,
					page: 1,
					limit: 30
				},
				focusWhere: {
					page: 1,
					limit: 30
				},
				storeScroll: true,
				storeTop: 0,
				storeHeight: 0,
				navHeight: 0,
				avatar: '',
				hederBg: '../static/images/plant_header.png',
				top: 300,
				shareInfo: {},
				actionSheetHidden: true,
				authorUid: 0,
				swiperCur: 0,
				circular: true,
				isScroll: false,
				interval: 3000,
				currentItemId: 0,
				swiperCurrent: 0,
				cateGoods: {},
				// 纬度
				latitude: 0,
				// 经度
				longitude: 0,
				// 小程序分享标题
				share_title: "",
				// 人员列表
				enterpriseStaffList: [],
				qiyeId: '',
				page: 1,
				userInfo: {},
				shequ_qrcodes: '', //社区二维码
			};
		},
		components: {
			authorize,
			WaterfallsFlow,
			productConSwiper,
			mentioned,
			comment,
			easyLoadimage,
			RangeSlider
			// ,
			// windowButton
		},
		// 滚动监听
		onPageScroll({
			scrollTop
		}) {
			uni.$emit('scroll');
		},
		created() {
			var that = this;
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 6;
					that.windowHeight = e.windowHeight;
					that.swiperHeight = that.windowHeight - 205
					that.$set(that, 'swiperHeight', that.windowHeight - 55);
				}
			});
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'viewColor', "keyColor"]),
			...configMap({
				community_status: 0,
				navigation: {}
			})
		},
		watch: {
			peopleViewCondition: function() {
				this.enterpriseList = []
				this.enterpriseListPage = 1
				// this.getEnterpriseList()
				this.page = 1
				this.enterpriseStaffList = []
				this.getEnterpriseStaffList()
			}
		},
		filters: {
			// 地址处理
			handleDistance(data) {
				if (data <= 1000) {
					return parseInt(data) + "m"
				} else {
					return parseInt(data / 1000) + "km"
				}
			}
		},
		onLoad() {
			// getNavigation().then(res => {
			// 	this.newData = res.data
			// 	this.is_show=res.data.is_show
			// 	if (this.newData.status && this.newData.status.status) {
			// 		uni.hideTabBar()
			// 	} else {
			// 		uni.showTabBar()
			// 	}
			// })

			var that = this;
			
			// this.getMerProductHot()
			// this.carduser()
			getPeopleCircleBanner().then(res => {
				this.bannerList = res.data.app_mp_banner
				this.shequ_qrcodes = res.data.shequ_qrcodes
			})
		},
		onShow() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.activeRouter = '/' + curRoute

			this.newData = this.navigation
			if (this.newData.status && this.newData.status.status) {
				uni.hideTabBar()
			} else {
				uni.showTabBar()
			}
			var that = this;
			uni.getLocation({
				success(res) {
					console.log(res, '经纬度获取了嘛？');
					that.latitude = res.latitude
					that.longitude = res.longitude
					// that.getEnterpriseList()
					that.page = 1
					that.enterpriseStaffList = []
					that.getEnterpriseStaffList()
				},
				fail() {
					that.page = 1
					that.enterpriseStaffList = []
					that.getEnterpriseStaffList()
				}
			})

			this.getCateList();
			this.getGoods();
			this.merClassifly()
			
			if (that.isLogin) {
				this.getUserInfo();
				this.getFocusArtical();
			} else {
				this.userInfo = {}
			}
			getShareTitle({
				field: "contactsCircleShareTitle"
			}).then(res => {
				this.share_title = res.data.contactsCircleShareTitle
			})
		},
		mounted: function() {

			// const query = uni.createSelectorQuery().in(this);
			// query.select('#main').boundingClientRect(data => {
			// 	console.log(data,"ata")
			// 	this.storeHeight = data.height;
			// 	this.storeTop = data.top;
			// }).exec();
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: this.share_title,
				path: "/pages/contactsCircle/index"
			}
		},
		onShareTimeline: function() {
			return {
				title: this.share_title,
				path: "/pages/contactsCircle/index"
			}
		},
		// #endif
		methods: {

			//切换导航
			switchTab(item) {
				if (item.type == 3) {
					this.$refs.createdIwPop.open('center')
				} else {
					this.type = item.type

					if (this.type == 2) {
						if (this.menuList && this.menuList.length > 0) {
							this.menuList.map((item, index) => {
								if (index == 0) {
									this.selectMenu(item, index, true);
								}
							})
						}
					}

					setTimeout(() => {
						this.type = item.type
					}, 100)
				}

			},
			// 分享
			showiw() {
				this.$refs.createdIwPop.close()
			},
			//跳转编辑页
			jumpedit() {
				uni.navigateTo({
					url: "/pages/users/editInfo/editInfo"
				})
			},
			//发布动态
			jumpFabu() {
				uni.navigateTo({
					url: "/pages/plantGrass/plant_release/index"
				})
			},
			//筛选
			finishSearch() {
				this.page = 1
				this.enterpriseStaffList = []
				this.getEnterpriseStaffList()
				this.isShaixuan = false
			},
			//重置
			reset() {
				this.sexId = ''
				this.xzId = ""
				this.rangeValues = [0, 100]
				this.nickname = ""
				this.age_min = 0
				this.age_max = 100
				this.sexList.forEach(item => {
					item.isSelexted = false
				})
				this.sexList[0].isSelexted = true
				this.xzList.forEach(item => {
					item.isSelexted = false
				})
			},
			//选择星座
			changeXZ(item, index) {
				this.xzList.forEach(item => {
					item.isSelexted = false
				})
				this.xzList[index].isSelexted = true
				this.xzId = item.name
			},
			//选择性别
			changeSex(item, index) {
				this.sexList.forEach(item => {
					item.isSelexted = false
				})
				this.sexList[index].isSelexted = true
				this.sexId = item.id
			},
			onRangeChange: function(e) {
				this.rangeValues = [parseInt(e.minValue), parseInt(e.maxValue)];
				this.age_min = parseInt(e.minValue)
				this.age_max = parseInt(e.maxValue)

				console.log(this.rangeValues);
				console.log(JSON.stringify(e));
			},
			// 名片信息
			// carduser() {
			// 	carduser({
			// 		share_uid: uni.getStorageSync('UID')
			// 	}).then(res => {
			// 		this.avatar = res.data.avatar
			// 		this.userInfo = res.data
			// 	})
			// },
			// 获取企业列表
			getEnterpriseList() {
				getEnterpriseList(this.peopleViewCondition, this.enterpriseListPage, this.latitude, this.longitude).then(
					res => {
						for (var i = 0; i < res.data.length; i++) {
							this.enterpriseList.push(res.data[i])
						}
					}).catch(err => {})
			},
			// 名片列表
			getEnterpriseStaffList() {
				console.log(this.xzId);
				let latitude = this.latitude
				let longitude = this.longitude
				setTimeout(item => {
					getEnterpriseStaffList(
						this.qiyeId,
						this.page, {
							nickname: this.nickname,
							sex: this.sexId,
							age_min: this.age_min,
							age_max: this.age_max,
							xz_text: this.xzId,
							order_type: this.peopleViewCondition,
							lat: latitude,
							lng: longitude
						}

					).then(res => {
						this.page++
						// this.qiyeName = res.data.enterprise.name
						for (var i = 0; i < res.data.list.length; i++) {
							this.enterpriseStaffList.push(res.data.list[i])
						}
					})
				}, 100)

			},
			//操作名片
			operation(item, index) {
				if (!this.isLogin) {
					this.toDeLu()
					return false;
				}
				addClient({
					client_uid: item.uid
				}).then(res => {
					uni.showToast({
						title: "已保存到名片夹",
						icon: "none"
					})
					console.log(item);
					console.log(index);
					console.log(this.enterpriseStaffList);
					this.enterpriseStaffList[index].client_check = 1
					// this.page = 1
					// this.enterpriseStaffList =[]
					// this.getEnterpriseStaffList()

				})

			},
			// tabbar路由跳转
			goRouter(item) {
				var pages = getCurrentPages();
				var page = (pages[pages.length - 1]).$page.fullPath;
				if (item.link == page) return
				uni.switchTab({
					url: item.link,
					fail(err) {
						uni.redirectTo({
							url: item.link
						})
					}
				})
			},
			// 获取企业行业列表
			merClassifly() {
				merClassifly().then(res => {
					this.hotSearchList = res.data
				})
			},
			// 跳转商品搜索页面
			toProductSearch() {
				uni.navigateTo({
					url: "/pages/columnGoods/goods_search/index"
				})
			},
			// 跳转商品详情
			toProductDetail(item) {
				uni.navigateTo({
					url: "/pages/goods_details/index?id=" + item.product_id
				})
			},
			// 获取推荐产品
			getMerProductHot() {
				getMerProductHot(uni.getStorageSync("merId"), {
					page: this.prdouctCenterPage,
					limit: 10
				}).then(res => {
					for (var i = 0; i < res.data.list.length; i++) {
						this.prdouctCenterData.push(res.data.list[i])
					}
				})
			},
			followScroll() {
				uni.$emit('scroll');
			},
			//分享信息
			shareFriend(item) {
				this.shareInfo = item
			},
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false
				this.getUserInfo();
				this.getFocusArtical();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 打开授权
			authOpen: function() {
				let that = this;
				if (that.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				}
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
				});
			},
			/*获取分类列表*/
			getCateList() {
				getTopicList().then(res => {
					this.menuList = res.data;
				})
			},
			swiperChange(e) {
				let {
					current,
					source,
					currentItemId
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.currentItemId = currentItemId;
					this.swiperCur = current
					this.selectMenu(this.menuList[this.swiperCur], this.swiperCur, false)
					if (this.menuList.length > 6) {
						var tempIndex = this.swiperCur - 2;
						tempIndex = tempIndex <= 0 ? 0 : tempIndex;
						let tabLeft = (this.swiperCur - 2) * this.isWidth; //设置下划线位置
						this.$nextTick(function() {
							this.$set(this, 'tabLeft', tabLeft);
						});
					}
				}
			},
			// 点击列表头部
			selectMenu(item, index, isScroll) {
				this.currentItemId = item.category_id;
				this.swiperCurrent = index;
				this.swiperCur = index
				this.isScroll = isScroll;
				this.tabClick = index; //设置导航点击了哪一个
				this.isLeft = index * this.isWidth; //设置下划线位置
				this.setMenuLeft(index);
			},
			/*导航栏移动位置*/
			setMenuLeft(index) {
				// if (this.menuList.length > 6) {
				// 	var tempIndex = index - 2;
				// 	tempIndex = tempIndex <= 0 ? 0 : tempIndex;
				// 	let tabLeft = (index - 2) * this.isWidth; //设置下划线位置
				// 	// this.$nextTick(function() {
				// 	// 	this.$set(this, 'tabLeft', tabLeft);
				// 	// });
				// }
				// this.tabClick = index; //设置导航点击了哪一个
				// this.isLeft = index * this.isWidth; //设置下划线位置
				this.getGoods();
			},
			showMore(item) {
				this.$set(item, 'show', true);
			},
			scrollLeft: function(e) {
				uni.$emit('scroll');
				this.navShow = e.detail.scrollTop >= this.storeHeight - 200;
				if (e.detail.scrollTop > e.detail.scrollHeight - 1500) {
					this.getGoods();
				}
				this.swiperHeight = this.windowHeight - 55
			},
			// 获取发现商品
			getGoods: function() {
				let that = this;
				that.goodsLoading = false
				if (!this.cateGoods[this.currentItemId]) {
					this.$set(this.cateGoods, this.currentItemId, {
						where: {
							...this.where,
							category_id: this.currentItemId
						},
						goods: []
					})
				}
				const data = this.cateGoods[this.currentItemId];
				const cateId = this.currentItemId;


				if (data.goodsLoading || data.goodsLoaded) return;
				data.goodsLoading = true;

				data.loadTitle = "";
				graphicLstApi(data.where).then(res => {
					data.goodsLoading = false;
					data.goodsLoaded = res.data.list.length < that.where.limit;
					if (data.where.page == 1) {
						data.goods = [];
					}
					data.goods.push.apply(data.goods, res.data.list);
					data.where.page = data.where.page + 1;
					this.$set(this.cateGoods, cateId, {
						...data
					});
				}).catch(err => {
					data.goodsLoading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
					this.$set(this.cateGoods, cateId, data);
				});
			},
			/*获取关注的人的文章列表*/
			getFocusArtical() {
				let that = this;
				if (that.focusLoading || that.focusLoaded) return;
				that.focusLoading = true;
				that.loadTitle = "";
				focusArticleLst(that.focusWhere).then(res => {
					console.log(res, '/*获取关注的人的文章列表*/');
					that.focusLoading = false;
					that.focusLoaded = res.data.list.length < that.focusWhere.limit;
					res.data.list.forEach((item) => {
						item.show = false
					})
					that.followList.push.apply(that.followList, res.data.list);
					that.focusWhere.page = that.focusWhere.page + 1;
				}).catch(err => {
					that.focusLoading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
			},
			// 商铺首页滚动 navbar 吸顶
			scrollHome: function(e) {
				this.navShow = e.detail.scrollTop >= this.storeHeight - 20;
			},
			likeToggle(item) {
				let status = item.relevance_id ? 0 : 1
				graphicStartApi(item.community_id, {
					status: status
				}).then(res => {
					if (item.relevance_id) {
						item.count_start--;
						item.count_start = item.count_start == 0 ? 0 : item.count_start
						item.relevance_id = false
					} else {
						item.count_start++;
						item.relevance_id = true
					}
				});
			},
			/*查看提到的宝贝*/
			openMore(item) {
				this.$refs.mentioned.showPopup()
				this.moreList = item.relevance;
				this.authorUid = item.uid
			},
			openCommon(item, index) {
				this.showComment = true
				this.$refs.comment.getData(item, index);
			},
			commentSucces(index) {
				this.followList[index]['count_reply']++

			},
			closePopup() {
				this.$refs.mentioned.closePopup()
			},
			close() {
				this.showComment = false;
			},
			onTouchmove(e) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#goods').boundingClientRect(data => {
					if (data.bottom < 1500) {

						if (this.tabActive == 1) {
							this.getGoods();
						} else {
							this.getFocusArtical();
						}
					}
				}).exec();
				// 模拟触底刷新
			},
			// 跳转需求广场
			toDemandSquare() {
				uni.navigateTo({
					url: "/pages/contactsCircle/demandSquare/demandSquare"
				})
			},
			// 跳转人脉搜索
			toPeopleSearch(item) {
				uni.navigateTo({
					url: "/pages/contactsCircle/peopleSearch/peopleSearch?name=" + item.category_name
				})
			},
			// 跳转我的
			toUserIndex() {
				uni.reLaunch({
					url: "/pages/user/index"
				})
			},
			// 跳转名片夹
			toMpjia() {
				uni.navigateTo({
					url: "/pages/userminp/mine/mpjia/mpjia"
				})
			},
			// 跳转购物车
			toShoppingCar() {
				uni.navigateTo({
					url: "/pages/order_addcart/order_addcart"
				})
			},
			// 跳转员工列表
			toStaffCard(item) {
				console.log(item.uid);
				// uni.navigateTo({
				// 	url: "/pages/contactsCircle/staffCardList/staffCardList?id=" + item.id
				// })
				// uni.setStorageSync("share_uid",item.uid)
				// uni.reLaunch({
				// 	url: '/pages/index/minp?share_uid=' + item.uid
				// })
				// uni.navigateTo({
				// 	url: "/page
				console.log(item);
				uni.navigateTo({
					url: "/pages/userminp/peopleDetail/peopleDetail?uid=" + item.uid
				})
			}
		},
		onReachBottom() {
			if (this.type == 1) {
				this.enterpriseListPage++
				// this.getEnterpriseList()
				this.getEnterpriseStaffList()
			} else if (this.type == 2) {
				if (this.tabActive == 1) {
					this.getGoods();
				} else {
					this.getFocusArtical();
				}
			} else if (this.type == 3) {
				this.prdouctCenterPage++;
				this.getMerProductHot()
			}
		},
	}
</script>
<style>
	page {
		background-color: #F6F6F6 !important;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding-bottom: 180rpx;
	}

	.herd {
		width: 100%;
		height: 384rpx;
		background-color: var(--view-theme);
		border-radius: 0 0 32rpx 32rpx;
		padding-top: 136rpx;
	}

	.topNav {
		margin: 0rpx 30rpx;
		margin-top: -38%;
		display: flex;
		align-items: center;

		// background-color: rgba(255, 255, 255, 0.97);
		&>image:nth-of-type(1) {
			width: 64rpx;
			height: 64rpx;
			margin-right: 40rpx;
			border-radius: 50%;
		}

		&>image:nth-of-type(2) {
			width: 48rpx;
			height: 48rpx;
			margin-right: 40rpx;
		}

		&>view {
			position: relative;
			display: flex;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			text {
				background-color: #4A93FF;
				color: white;
				position: absolute;
				right: -80rpx;
				top: -20rpx;
				padding: 5rpx 10rpx;
				font-size: 20rpx;
				width: 70rpx;
				display: inline-block;
				border-radius: 20rpx 20rpx 20rpx 0;
			}
		}

		.editInfo {
			display: flex;
			align-items: center;
			border-radius: 44rpx;
			padding: 10rpx 20rpx;
			margin-left: 80rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.navClass {
		margin: 50rpx 30rpx 30rpx 30rpx;
		display: flex;

		&>view {
			margin-right: 40rpx;
			font-size: 34rpx;
			color: #ffffffb8;
			text-align: center;
		}

		image {
			width: 30rpx;
			height: 18rpx;
		}

		.shaixuan {
			width: 68rpx;
			height: 68rpx;
			margin-left: auto;
			margin-right: 0
		}

		.active {
			color: #FFFFFF;
			font-size: 40rpx;
		}
	}

	.bigImg {
		margin: 0 30rpx 30rpx 30rpx;

		.swiper {
			height: 375rpx;
			border-radius: 10rpx;
		}

		image {
			width: 100%;
			height: 375rpx;
			border-radius: 10rpx;
		}
	}

	.search {
		margin: 0 30rpx 30rpx 30rpx;

		.input {
			position: relative;
			background-color: white;
			border-radius: 40rpx;
			padding: 20rpx 20rpx 20rpx 100rpx;

			image {
				position: absolute;
				top: 50%;
				left: 38rpx;
				width: 32rpx;
				height: 32rpx;
				transform: translateY(-50%);
			}
		}

		.hotSearch {
			margin-top: 10rpx;
			display: flex;
			flex-wrap: wrap;

			&>view {
				padding: 15rpx;
				border-radius: 20rpx;
				margin: 10rpx 10rpx 10rpx 0;
				background-color: #EEEEEE;
				color: #666666;
			}
		}
	}

	.contentList {
		padding: 30rpx;
		background-color: white;
		border-radius: 32rpx 30rpx 0 0;

		.contentTitle {
			text {
				width: 100rpx;
				display: inline-block;
			}

			.active {
				color: var(--view-theme);
			}
		}

		.contentData {

			// margin-top:20rpx;
			.listViewitem {
				border-bottom: 2rpx solid #F0F0F0;
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				.image1 {
					border-radius: 60rpx;
					width: 120rpx;
					height: 120rpx;
				}


				.conListView {

					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					// align-items: center;
					justify-content: space-between;

					.left {
						flex: 5;

						.view11 {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							.text1 {
								flex: 1;
								font-size: 30rpx;
								font-weight: 600;
							}

							.text2 {
								font-size: 26rpx;
								font-weight: 400;
								color: #666666;
							}
						}

						.view1 {
							// color: #999999;
							// font-size: 22rpx;
							// font-weight: 400;
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							.sex0 {
								display: flex;
								align-items: center;
								background-color: #666666;
								padding: 4rpx 12rpx;
								border-radius: 44rpx;

								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 4rpx;
								}

								text {
									font-size: 20rpx;
									color: #fff;
								}
							}

							.sex {
								display: flex;
								align-items: center;
								background-color: #4fe0fd;
								padding: 4rpx 12rpx;
								border-radius: 44rpx;

								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 4rpx;
								}

								text {
									font-size: 20rpx;
									color: #fff;
								}
							}

							.sex1 {
								display: flex;
								align-items: center;
								background-color: #ff557f;
								padding: 4rpx 12rpx;
								border-radius: 44rpx;

								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 4rpx;
								}

								text {
									font-size: 20rpx;
									color: #fff;
								}
							}

						}
					}

					.right {
						// flex: 1;
						// text-align: center;
						// image{
						// 	width: 36rpx;
						// 	height: 36rpx;
						// }
						color: #999;
						font-size: 22rpx;
						display: -webkit-box;
						/* 设置为弹性盒子 */
						-webkit-line-clamp: 2;
						/* 最多显示两行 */
						-webkit-box-orient: vertical;
						/* 垂直方向排列 */
						overflow: hidden;
						/* 溢出部分隐藏 */
						text-overflow: ellipsis;
						/* 使用省略号代替溢出部分 */
					}

				}

			}

			&>view:last-of-type {
				border-bottom: none;
			}
		}
	}

	.sharingClass {
		padding: 30rpx;
		width: 100%;
		white-space: nowrap;

		.sharingClassScroll {
			height: auto;
			border-bottom: 1px solid #F0F0F0;
		}

		view {
			margin-right: 40rpx;
			display: inline-block;
			padding-bottom: 10rpx;
		}

		.active {
			font-weight: 600;
			border-bottom: 4rpx solid #E13D21;
		}
	}

	.sharingClassTitle {
		padding: 0 30rpx;

		text {
			width: 100rpx;
			display: inline-block;
		}

		.active {
			color: var(--view-theme);
		}
	}

	.sharingClassContent {
		padding: 30rpx;

		.sharingClassContentBox {
			background-color: white;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.sharingClassContentBoxTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;

				.sharingClassContentBoxTopLeft {
					display: flex;
					align-items: center;

					&>view {
						margin-left: 20rpx;

						&>view:nth-of-type(1) {
							font-size: 34rpx;
							font-weight: 600;
							margin-bottom: 10rpx;
						}

						&>view:nth-of-type(2) {
							color: #999999;
							font-size: 24rpx;
						}
					}

					&>image {
						height: 90rpx;
						width: 90rpx;
						border-radius: 10rpx;
					}
				}

				&>button {
					background-color: #F8EEEE;
					width: 140rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 40rpx;
					color: #E13D21;
					font-size: 28rpx;
				}
			}

			.sharingClassContentBoxBody {
				font-size: 32rpx;

				// padding: 0 20rpx;
				.sharingClassContentBoxBodyText {
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}

				.sharingClassContentBoxBodyImg {
					padding-bottom: 20px;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-gap: 10rpx;

					image {
						width: 210rpx;
						height: 210rpx;
						// margin-right: 10rpx;
					}
				}
			}

			.sharingClassContentBoxBottom {
				display: flex;
				justify-content: flex-end;

				&>view {
					display: flex;
					align-items: center;
					margin-left: 40rpx;

					image {
						margin-right: 10rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}

	.productCenterSearch {
		margin: 0 30rpx 30rpx 30rpx;
		display: flex;
		align-items: center;

		.productCenterSearchInput {
			position: relative;
			background-color: white;
			border-radius: 40rpx;
			padding: 20rpx 20rpx 20rpx 100rpx;
			width: 85%;

			image {
				position: absolute;
				top: 50%;
				left: 38rpx;
				width: 32rpx;
				height: 32rpx;
				transform: translateY(-50%);
			}
		}

		&>image {
			height: 48rpx;
			width: 48rpx;
			margin: 0 20rpx;
		}
	}

	.productCenterContent {
		margin: 0 30rpx 30rpx 30rpx;
		padding-bottom: 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;

		.productCenterContentBox {
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;

			&>image {
				height: 334rpx;
				width: 334rpx;
			}

			&>view:nth-of-type(1) {
				font-size: 28rpx;
				padding: 10rpx 30rpx;
			}

			&>view:nth-of-type(2) {
				color: #E13D21;
				font-size: 40rpx;
				padding: 0 30rpx 10rpx 30rpx;

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.productCenterContentList {
		padding-bottom: 10rpx;

		.productCenterContentBox {
			background-color: white;
			border-radius: 20rpx;
			padding: 30rpx;
			margin: 30rpx;
			display: grid;
			grid-template-columns: repeat(2, 43%);

			// display: flex;
			// align-items: center;
			&>image {
				height: 250rpx;
				width: 250rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			&>view {
				position: relative;

				&>view:nth-of-type(1) {
					font-size: 28rpx;
					// position: absolute;
					// top: 30rpx;
					// left: 0;
				}

				&>view:nth-of-type(2) {
					color: #E13D21;
					font-size: 36rpx;
					position: absolute;
					bottom: 0;

					text {
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.page_con {
		position: relative;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
	}

	.longTab {
		display: flex;
		width: 100%;
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 20rpx 0;

		.longItem {
			height: 50upx;
			display: inline-block;
			line-height: 50upx;
			text-align: center;
			font-size: 30rpx;
			color: #999999;
			max-width: 160rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			overflow-x: scroll;
			overflow-y: hidden;
			/*解决ios上滑动不流畅*/
			-webkit-overflow-scrolling: touch;
			position: relative;

			&.click {
				font-weight: bold;
				font-size: 34rpx;
				color: var(--view-theme);

				&::after {
					content: "";
					display: block;
					width: 60rpx;
					height: 4rpx;
					background-color: var(--view-theme);
					display: flex;
					position: absolute;
					left: 50%;
					margin-left: -32rpx;
					bottom: 0rpx;
				}

				.underline {
					opacity: 1;
				}
			}
		}

		.underlineBox {
			height: 3px;
			width: 20%;
			display: flex;
			align-content: center;
			justify-content: center;

			.underline {
				opacity: 0;
				width: 60rpx;
				height: 4rpx;
				background-color: #e93323;
			}
		}
	}

	uni-swiper,
	swiper {}

	uni-swiper-item {}

	.tab-cont {
		border-radius: 16rpx 16rpx 0 0;
	}

	.follow_count {
		/* #ifndef MP */
		padding: 20rpx 20rpx 100rpx;
		/* #endif */
		/* #ifdef MP */
		padding: 20rpx 20rpx 0;

		/* #endif */
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.author {
			display: flex;
			align-items: center;

			.picture {
				width: 78rpx;
				height: 78rpx;
				border-radius: 100%;
				overflow: hidden;
			}

			/deep/image,
			/deep/.easy-loadimage,
			uni-image {
				height: 78rpx;
			}

			.name {
				margin-left: 20rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.time {
			color: #999999;
			font-size: 24rpx;
		}

		.product {
			margin-top: 20rpx;
			border-radius: 16rpx;
		}

		.icon-fenxiang2 {
			color: #282828;
			font-size: 46rpx;
		}
	}

	.list_count {
		margin-bottom: 70rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.pro_describle {
		.mentioned {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F5F5F5;

			.title {
				color: #666666;
				font-size: 26rpx;
			}
		}

		.product_more {
			max-width: 360rpx;
			display: flex;
			align-items: center;

			.more_image {
				width: 58rpx;
				height: 58rpx;
				border-radius: 5rpx;
				margin-right: 12rpx;
				display: inline-block;
				border: 1rpx solid #BBBBBB;
			}

			/deep/image,
			/deep/.easy-loadimage,
			uni-image {
				width: 58rpx;
				height: 58rpx;
			}

			.iconfont {
				color: #CCCCCC;
				margin-left: 10rpx;
			}
		}

		.product_info {
			line-height: 45rpx;
			margin: 20rpx 0;

			.text {
				font-size: 28rpx;
				color: #282828;
			}

			.unfold_btn {
				margin-left: 30rpx;
				font-size: 30rpx;
				color: #282828;
				font-weight: bold;
			}
		}

		.product_cate {
			margin: 20rpx 0;
			display: inline-block;

			>view {
				display: flex;
				align-items: center;
				background: var(--view-minorColor);
				border-radius: 30rpx;
				padding: 0 25rpx;
				line-height: 56rpx;
				height: 56rpx;
				color: var(--view-theme);

				.text {
					font-size: 28rpx;
				}

				.icon {
					font-size: 35rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
			}

		}

		.foot_bar {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				display: flex;
				align-items: center;
				color: #282828;

				&.icon-fenxiang2 {
					font-size: 46rpx;
				}
			}

			.item_count {
				font-size: 26rpx;
				display: flex;
				align-items: center;

				&:first-child {
					margin-right: 30rpx;
				}

				.iconfont {
					font-size: 40rpx;
					margin-right: 5rpx;
				}

				.icon-shoucang1 {
					color: var(--view-priceColor);
				}
			}
		}
	}

	.grass_header {
		display: flex;
		flex-direction: column;
		background-image: none;
		background-size: cover;
		background-color: #ffffff;
		width: 100%;
		z-index: 10;
	}

	.header {
		padding: 30rpx;

		.navTab {
			position: relative;
			padding: 20rpx 0 40rpx 0;

			.nav-item {
				font-size: 32rpx;
				color: #666666;

				&:first-child {
					margin-right: 70rpx;
				}

				&.on {
					font-size: 38rpx;
					color: #282828;
					font-weight: bold;
				}
			}

			.release_btn {
				width: 58rpx;
				height: 58rpx;
				border-radius: 100%;
				background-image: linear-gradient(126deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
				color: #fff;
				position: absolute;
				top: 30rpx;
				left: 0;

				.iconfont {
					font-size: 28rpx;
				}
			}

			.avatar {
				width: 58rpx;
				height: 58rpx;
				border-radius: 100%;
				border: 3rpx solid rgba(0, 0, 0, .05);
				position: absolute;
				top: 20rpx;
				right: 0;
			}
		}

		.search_count {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.release_btn {
				width: 58rpx;
				height: 58rpx;
				border-radius: 100%;
				background-image: linear-gradient(126deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
				color: #fff;
				// position: absolute;
				top: 0;
				left: 0;

				.iconfont {
					font-size: 28rpx;
				}
			}

			.search_topic {
				width: 46rpx;
				height: 46rpx;

				image,
				.topic_icon,
				uni-image {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}

		.search {
			display: flex;
			align-items: center;
			min-width: 0;
			height: 58rpx;
			border-radius: 29rpx;
			background-color: #F6F6F6;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			width: 530rpx;
			margin: 0 30rpx;

			.iconfont {
				margin-right: 13rpx;
				margin-left: 30rpx;
				font-size: 24rpx;
			}
		}
	}

	.main_count {
		background-color: #ffffff;
		padding: 30rpx 20rpx;

		.list {
			width: 710rpx;
			height: 280rpx;
			margin-bottom: 30rpx;
			position: relative;

			.picture {
				width: 710rpx;
				height: 280rpx;
				border-radius: 16rpx;
			}
		}
	}

	.main {
		flex: 1;
		min-height: 60vh;
		height: auto;
	}

	.nav.fixed {
		position: fixed;
		left: 0;
		width: 100%;

		.nav-cont {
			position: absolute;
			width: 100%;
		}
	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx;
		background: #ffffff;
		width: 750rpx;
		/* #ifdef H5 */
		padding-bottom: 10rpx;

		/* #endif */
		.item {
			width: 345rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			/deep/.image,
			/deep/.easy-loadimage,
			uni-image {
				width: 345rpx;
				height: 345rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.text {
				padding: 20rpx 20rpx 25rpx;

				.name {
					font-weight: 500;
					font-size: 30rpx;
					line-height: 1;
					color: #222222;
					display: flex;
					align-items: center;

					.name_text {
						display: inline-block;
						max-width: 400rpx;
					}
				}

				.money-wrap {
					display: flex;
					align-items: center;
					margin-top: 43rpx;

					.money {
						font-weight: bold;
						font-size: 26rpx;
						color: $theme-color;

						text {
							font-size: 34rpx;
							line-height: 1;
						}
					}

					.ticket {
						height: 26rpx;
						padding-right: 9rpx;
						padding-left: 9rpx;
						border: 1rpx solid $theme-color;
						border-radius: 4rpx;
						margin-left: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						line-height: 24rpx;
						color: $theme-color;
					}
				}

				.score {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 20rpx;
					line-height: 1;
					color: #737373;
				}
			}

			.foot {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 52rpx;
				background: linear-gradient(to right, #F11B09, #F67A38);
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

				.iconfont {
					margin-right: 10rpx;
					font-size: 22rpx;
					line-height: 1;
				}
			}
		}
	}

	.empty {
		width: 100%;
		text-align: center;
		margin-top: 200rpx;
		/* #ifdef MP */
		margin-top: 100rpx;

		/* #endif */
		image,
		uni-image {
			display: inline-block;
			width: 414rpx;
			height: 305rpx;
		}

		.title {
			font-size: 28rpx;
			color: #282828;
			font-weight: bold;
			margin-bottom: 14rpx;
		}

		text {
			display: block;
			color: #999999;
			font-size: 26rpx;
		}

		.login_btn {
			width: 440rpx;
			text-align: center;
			height: 76rpx;
			line-height: 76rpx;
			color: var(--view-theme);
			border: 1rpx solid var(--view-theme);
			border-radius: 40rpx;
			margin: 44rpx auto 0;
			font-size: 32rpx;
		}
	}

	.page-footer {
		position: fixed;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		box-sizing: border-box;
		border-top: solid 1rpx #F3F3F3;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

		.foot-item {
			display: flex;
			width: max-content;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;

			.count-num {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 40rpx;
				top: 0rpx;
				right: -15rpx;
				color: #fff;
				font-size: 20rpx;
				background-color: #FD502F;
				border-radius: 50%;
				padding: 4rpx;
			}
		}

		.foot-item image {
			height: 50rpx;
			width: 50rpx;
			text-align: center;
			margin: 0 auto;
		}

		.foot-item .txt {
			font-size: 24rpx;


			&.active {}
		}
	}

	.new-users {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.haibaoText {
		margin-top: 10rpx;

		&>view {
			display: flex;
			align-items: center;
			margin-top: 10px;

			text {
				margin-right: 10rpx;
			}

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.shaixuancard {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;

		.card {
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 0 0;
			padding: 40rpx 32rpx 120rpx 32rpx;
			display: flex;
			flex-direction: column;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.topLeft {



					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.textTitle {
					font-size: 32rpx;

				}

				.topRight {
					text {
						font-size: 32rpx;
					}
				}
			}

			.searchView {
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				border: 1rpx solid #EEEEEE;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				padding: 10rpx 32rpx;

				input {
					flex: 1;
				}
			}

			p {
				color: #000000;
				font-size: 28rpx;
				font-weight: 600;
				margin-right: 20rpx;
			}

			.sexView {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.sexItem {
					background-color: #FFFFFF;
					border: 1rpx solid #EEEEEE;
					border-radius: 44rpx;
					width: 160rpx;
					height: 64rpx;
					margin-right: 32rpx;
					text-align: center;
					line-height: 64rpx;
				}

				.select {
					background-color: var(--view-theme);
					color: #FFFFFF;
					border: none;
				}
			}

			.title2 {
				display: flex;
				margin-top: 40rpx;
				align-items: center;

				text {
					color: #999;
					font-size: 26rpx;
				}
			}

			.Slider {
				margin: 20rpx 0;
			}

			.xzView {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 100rpx;

				.xzItem {
					background-color: #FFFFFF;
					border: 1rpx solid #EEEEEE;
					border-radius: 44rpx;
					width: 160rpx;
					height: 64rpx;
					margin-right: 32rpx;
					text-align: center;
					line-height: 64rpx;
					margin: 20rpx 0rpx;
				}

				.xzselect {
					background-color: var(--view-theme);
					color: #FFFFFF;
					border: none;
					margin: 20rpx 0rpx;
				}
			}






		}
	}

	.oback {
		.odivpp {
			height: 220rpx;
			position: relative;

			.oive {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 108rpx;
				height: 160rpx;

			}

			.oivee {
				width: 108rpx;
				height: 160rpx;
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
			}

			p {
				position: absolute;
				top: 30%;
				font-family: "PingFang SC";
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #fff;

				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}

			p:nth-child(2) {
				position: absolute;
				top: 50%;
			}
		}

		.oimage {
			width: 500rpx;
			height: 650rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>